<template>
<div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
        <div class="table-page-search-wrapper">
            <div class="title_part">基本信息</div>
            <div class="flex-aic flex-wrap">
                <div v-for="(item,index) in baseKeys" :key="index" class="list_item">
                    <span class="list_item_name">{{ item }}：</span>
                    <span>{{ orderDetail?.orderBaseInfoVO?.[index] }}</span>
                </div>
            </div>
            <a-divider />
            <div class="title_part">收货信息</div>
            <div class="flex-aic flex-wrap">
                <div v-for="(item,index) in receiveKeys" :key="index" class="list_item">
                    <span class="list_item_name">{{ item }}：</span>
                    <span>{{ orderDetail?.recipientVO?.[index] }}</span>
                </div>
            </div>
            <a-divider />
            <div class="title_part">商品信息</div>
            <a-table :columns="productColumns" :rowKey="(it,index) => (it.skuCode +index) " :data-source="orderDetail.items">
                <div slot="designUrls" slot-scope="record">
                    <img width="100px" height="100px" v-if="record.designUrls.length <2" :src="record.designUrls" />
                    <div v-else class="flex-aic" style="flex-wrap: wrap;">
                        <template v-for="(item,index) in record.designUrls">
                            <img width="50px" height="50px" style="margin-right: 6px;cursor: pointer;" :key="index" :src="item" @click="zoomPic(item)" />
                        </template>
                    </div>
                </div>
                
                <img width="100px" height="100px" slot="effectUrls" slot-scope="record" :src="record.effectUrls" />
            </a-table>
            <a-divider />
            <!-- <div class="title_part">费用信息 <span class="description_word">支付总额 = 商品总额 + 物流总额 + 税费 - 商品优惠 - 物流优惠</span></div> -->
            <!-- <a-divider /> -->
            <div class="title_part">物流信息</div>
            <div class="flex-aic-top">
                <div class="flex-aic flex-wrap" style="width: 75%;">
                    <div v-for="(item,index) in logisticsKeys" :key="index" class="list_item small_one">
                        <span class="list_item_name">{{ item }}：</span>
                        <span>{{ orderDetail?.packageVO?.[index] }}</span>
                    </div>
                </div>
                <!-- <a-button type="primary">查看物流</a-button> -->
            </div>
            
            <a-divider />
            <div class="title_part">操作信息</div>
            <a-tabs v-model="currOpreaTab">
                <a-tab-pane key="-1" tab="日志">
                    <a-table :columns="logColumns" :data-source="orderDetail.flow">
                    </a-table>
                    
                </a-tab-pane>
            </a-tabs>
            <div class="flex-aic">

            </div>
            <a-divider />
        </div>
    </a-card>
    <PreviewPic :isShowPic="previewVisible" @closePreviewpic="previewHandleCancel" :previewImage="previewImage"></PreviewPic>
</div>
</template>

<script>
import {orderDetail} from '@/api/order'
import PreviewPic from "@/comps/PreviewPic.vue"
export default {
    name: 'OrderDetail',
    components:{PreviewPic},
    data() {
        return {
            orderId:'',
            baseInfoForm:this.$form.createForm(this, { name: 'detail_base' }),
            orderDetail: {},
            baseKeys:{
                'sysOrderNo':'订单号',
                'orderNo':'客户订单号',
                'clientName': '客户名',
                'email':'邮箱',
                'freight':'运费',
                'goodsFee':'单价',
                'orderPrice':'订单金额',
                'paymentId':'支付账单Id',
                'salesMan':'业务员',
                'status':'订单状态',
            },
            receiveKeys:{
                'receiveName':'收货人名字',
                'receiveEmail':'收货人邮箱',
                'phone':'电话',
                'state':'洲',
                'country':'国家',
                'city':'城市',
                'street':'街道地址',
                'addr1':'详细地址1',
                'addr2':'详细地址2',
                'postcode':'邮编',
            },
            logisticsKeys:{
                'waybillCode':'运单号',
                'url':'面单地址',
            },
            currOpreaTab:'-1',
            logColumns: [
                {
                    title: '操作者',
                    dataIndex: 'operator',
                    key: 'operator',
                    width: 80,
                },
                {
                    title: '操作类型',
                    dataIndex: 'type',
                    key: 'type',
                    width: 80,
                },
                {
                    title: '备注',
                    dataIndex: 'remark',
                    key: 'remark',
                    width: 80,
                },
                {
                    title: '操作时间',
                    dataIndex: 'operateTime',
                    key: 'operateTime',
                    width: 80,
                },
            ],
            productColumns: [
                {
                    title: '系统SKU',
                    dataIndex: 'skuCode',
                    // key: 'skuCode',
                    width: 80,
                },
                {
                    title: '客户SKU',
                    dataIndex: 'clientSku',
                    // key: 'clientSku',
                    width: 80,
                },
                {
                    title: '结算费用',
                    dataIndex: 'settlementPrice',
                    // key: 'settlementPrice',
                    width: 80,
                },
                {
                    title: '数量',
                    dataIndex: 'qty',
                    // key: 'qty',
                    width: 80,
                },
                {
                    title: '商品设计图',
                    // dataIndex: 'designUrls',
                    // key: 'designUrls',
                    width: 120,
                    scopedSlots: { customRender: 'designUrls' }
                },
                {
                    title: '效果图',
                    // dataIndex: 'effectUrls',
                    // key: 'effectUrls',
                    width: 80,
                    scopedSlots: { customRender: 'effectUrls' }
                },
            ],
            previewVisible:false,
            previewImage: "",
        }
    },
    created() {
        this.orderId = this.$route?.query?.id
        // this.orderId = 'NO1681984848836689920'
        this.getDetail();
    },
    methods: {
        async getDetail(){
            let res = await orderDetail(this.orderId)
            console.log('rerere',res)
            this.orderDetail =res.data
        },
        zoomPic(item) {
            this.previewImage = item;
            this.previewVisible = true;
        },
        previewHandleCancel() {
            this.previewVisible = false;
        },
    },
};
</script>
<style lang="scss" scoped>
    .title_part{
        display: list-item;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        color: #000;
        font-weight: 600;
        list-style-type: disc;
        .description_word{
            display: inline-block;
            font-size: 13px;
            color: #e1576f;
        }
    }
    .list_item{
        width: 33%;
        font-size: 14px;
        margin-top: 15px;
        &.small_one{
            width: 33.33%;
        }
        &_name{
            display: inline-block;
            width: 130px;
            text-align: right;
            color: #333;
            font-weight: 500;
        }
    }
</style>